<script setup>
import {ref} from "vue";

let prop = defineProps(['msg','eventName'])
let allMsg = ref({})
prop.msg.forEach((item) => {
  allMsg.value[item.element_name] = item['element_value'];
})
let openNewPage = (x) => {
    window.open(x)
}
</script>

<template>
  <div class="answer-me">
    <div class="answer-icon">
      <img src="../../assets/images/panda.png" alt="">
    </div>
    <div class="me-ques">
        <div class="bg">
            <div class="ti">为您查询出{{prop.eventName}}的事项指南：</div>
            <div class="tit">
                <div class="tit-li">
                    到办事现场次数<span>{{allMsg['到办事现场次数']}}</span>次
                </div>
                <div class="tit-li">
                    法定办结时限<span>{{allMsg['法定办结时限'].replace('个工作日','')}}</span>个工作日
                </div>
                <div class="tit-li">
                    承诺办结时限<span>{{allMsg['承诺办结时限'].replace('个工作日','')}}</span>个工作日
                </div>
            </div>
            <div class="material-list">
                <div class="mm">
                    <div class="mmi"><span class="mm-tit">服务对象</span>{{allMsg['服务对象']}}</div>
                    <div class="mmi"><span class="mm-tit">通办范围</span>{{allMsg['通办范围']}}</div>
                    <div class="mmi"><span class="mm-tit">办件类型</span>{{allMsg['办件类型']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi"><span class="mm-tit">是否收费</span>{{allMsg['是否收费']}}</div>
                    <div class="mmi"><span class="mm-tit">认证等级需求</span>{{allMsg['认证等级需求']}}</div>
                    <div class="mmi"><span class="mm-tit">行使方式</span>{{allMsg['行使方式']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi"><span class="mm-tit">特别程序</span>{{allMsg['特别程序']}}</div>
                    <div class="mmi"><span class="mm-tit">是否支持预约办理</span>{{allMsg['是否支持预约办理']}}</div>
                    <div class="mmi"><span class="mm-tit">是否支持物流快递</span>{{allMsg['是否支持物流快递']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi"><span class="mm-tit">网办类型</span>{{allMsg['网办类型']}}</div>
                    <div class="mmi"><span class="mm-tit">是否支持预约办理</span>{{allMsg['是否支持预约办理']}}</div>
                    <div class="mmi"><span class="mm-tit">是否支持物流快递</span>{{allMsg['是否支持物流快递']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi"><span class="mm-tit">实施主体</span>{{allMsg['实施主体']}}</div>
                    <div class="mmi"><span class="mm-tit">事项类型</span>{{allMsg['事项类型']}}</div>
                    <div class="mmi"><span class="mm-tit">行使层级</span>{{allMsg['行使层级']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi"><span class="mm-tit">是否网办</span>{{allMsg['是否网办']}}</div>
                    <div class="mmi"><span class="mm-tit">是否支持网上支付</span>{{allMsg['是否支持网上支付']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi mmi2"><span class="mm-tit">必须到现场原因</span>{{allMsg['必须到现场原因']}}</div>
                    <div class="mmi mmi2"><span class="mm-tit">受理条件</span>{{allMsg['受理条件']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi mmi2"><span class="mm-tit">中介服务实施机构及资质资格要求</span>{{allMsg['中介服务实施机构及资质资格要求']}}</div>
                    <div class="mmi mmi2"><span class="mm-tit">中介服务事项名称</span>{{allMsg['中介服务事项名称']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi mmi1"><span class="mm-tit">收费标准</span>{{allMsg['收费标准']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi mmi1"><span class="mm-tit">办理地点</span>{{allMsg['办理地点']}}</div>
                </div>
                <div class="mm">
                    <div class="mmi mmi1"><span class="mm-tit">网办地址</span><span class="href" @click="openNewPage(allMsg['网办地址'])">点击跳转</span></div>
                </div>
                <div class="mm">
                    <div class="mmi mmi1"><span class="mm-tit">办理流程</span>{{allMsg['办理流程']}}</div>
                </div>
            </div>
            <div class="tis">部分事项信息</div>
        </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tit {
  display: flex;
  padding: 10px 0 5px 20px;

  .tit-li {
    font-size: 18px;
    margin-right: 30px;

    span {
      color: #ff9800;
      font-weight: bold;
      font-size: 24px;
      padding: 0 5px;
    }
  }
}

.answer-me {
  display: flex;
  margin-bottom: 10px;
  margin-top: 10px;

  .answer-icon {
    width: 30px;
    height: 30px;
    position: relative;
    top: 5px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .me-ques {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin-left: 10px;
    letter-spacing: 2px;
    width: calc(100% - 45px);
      .bg{
          background-color: #f5f5f5;
          padding: 20px;
          border-radius: 10px;
      }
      .ti{
          font-weight: bold;
          font-size: 16px;
      }

    .material-list {
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .mm {
        padding-top: 10px;
        padding-left: 20px;
        cursor: pointer;
        margin-right: 30px;
        display: flex;
        width: 100%;
          .href:hover{
              color: #F2C037;
          }
        .mmi {
          width: 33%;
          text-align: left;
        }
        .mmi2{
          width: 50%;
        }
        .mmi1{
          width: 100%;
        }
        .mm-tit {
          font-weight: bold;
          margin-right: 10px;
        }
      }
    }

    .tis {
      padding-top: 10px;
      font-size: 12px;
      color: gainsboro;
      padding-left: 20px;
    }
  }
}

</style>
